<script>

import PersonPage from '@/components/person/index'
import FilePage from '@/components/file/index'
import { getMain, saveMain, getUserTime } from '@/api/index'

export default {
  name: "index",
  components: {
    PersonPage,
    FilePage,
  },
  data() {
    var checkFile2 = (rule, value, callback) => {
      if (this.form.selected === 1) {
        if (!value || value.length === 0) {
          return callback(new Error('请上传印刷用PDF文件'));
        } else {
          if (value.length > 1) {
            return callback(new Error('只能上传一个印刷用PDF文件'));
          } else {
            return callback();
          }
        }
      } else {
        return callback();
      }
    };
    var checkFile3 = (rule, value, callback) => {
      if (this.form.selected === 1) {
        if (!value || value.length === 0) {
          return callback(new Error('请上传原始可编辑文件'));
        } else {
          return callback();
        }
      } else {
        return callback();
      }
    };
    return {
      totalSize: 1024 * 2 * 1024 * 1024,
      form: {
        id: "",
        selected: "",
        files1: [],
        files2: [],
        files3: [],
        files4: [],
        files5: []
      },
      rules: {
        selected: [
          { required: true, message: "请选择是否补充提交意愿", trigger: "blur" }
        ],
        files2: [
          { validator: checkFile2, trigger: "blur" }
        ],
        files3: [
          { validator: checkFile3, trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          saveMain(this.form).then((res) => {
            if (res && res.data && res.data.success) {
              this.$message.success('提交成功');
            } else {
              this.$message.error('提交失败,请稍后重试.');
            }
          })
        }
      });
    },
    download() {
      window.open("https://zb.shabidding.com/fx/A3展板模板.rar");
    }
  },
  mounted() {
    if (this.$route.query.s) {
      getUserTime(this.$route.query.s).then((res) => {
        if (res && res.data && res.data.success) {
          this.form.id = res.data.data;
          getMain(this.form.id).then(res => {
            if (res && res.data && res.data.success) {
              this.form = res.data.data
            } else {
              this.$message.error('数据请求失败,请稍后重试.');
            }
          })
        } else {
          this.$message.error('链接已失效,请重新申请.');
        }
      })
    }
  }
}
</script>

<template>
  <el-container>
    <el-header height="300px;">
      <div class="header-up">
        <div class="header-title">
          宣传展示素材补充提交 <br>
          Promotional Material Submission
        </div>
        <div class="header-logo">
          <img src="@/assets/logo.png" alt="logo">
        </div>
      </div>
      <div class="header-down">
        <el-icon class="el-icon-upload"></el-icon> &nbsp补充成果提交截止时间 Submission Deadline 2025.07.13 22:00
      </div>
    </el-header>
    <el-main>
      <div class="main-content">
        <el-form ref="form" :rules="rules" :model="form" label-width="180px">
          <el-form-item prop="selected" label-width="10px">
            <el-radio-group v-model="form.selected" size="small">
              <el-radio :label="1" style="radio-item">我有意愿提交并接受《宣传展示素材补充提交公告》内容。<br><br>I am willing to submit and
                accept the
                content in "Supplementary Announcement".</el-radio>
              <el-radio :label="2"
                style="radio-item">我愿意按照《宣传展示素材补充提交公告》要求提交，但无法自行制作展板。我委托组委会代为制作展板，并承诺对组委会制作的展板无异议权。<br><br>I am
                willing to submit but I am unable to complete the display board. I delegate the task to the Competition
                Organizing
                Committee, <br><br>and I acknowledge that I will have no right to dispute the display board produced by
                the
                Committee.</el-radio>
              <el-radio :label="3" style="radio-item">我经过慎重考虑后决定放弃本轮提交的权利（不推荐）。<br><br>I decide to waive the right to
                sumbit after
                careful consideration.(Not Recommended)</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item prop="files1" v-if="form.selected === 2">
            <template slot="label">
              介绍视频及附件（可传）
            </template>
            <FilePage v-model="form.files1" :mainId="form.id" :formData="form" field="files1" fileKey="files1">
              <div slot="tip" class="el-upload__tip">
              </div>
            </FilePage>
          </el-form-item>

          <el-form-item prop="files2" v-if="form.selected === 1" :required="this.form.selected === 1">
            <template slot="label">
              印刷用PDF文件(必传)<br><br> &nbsp&nbsp&nbspPrint-ready PDF File <br>&nbsp&nbsp (Mandatory)
            </template>
            <FilePage v-model="form.files2" :mainId="form.id" :formData="form" field="files2" fileKey="files2"
              :accept="'.pdf'" :acceptType="'pdf'" :limit="1">
              <div slot="tip" class="el-upload__tip">
                仅限.pdf格式，单个文件大小不超过2GB，最多上传1个文件。<br>
                Only one PDF file is accepted, maximum file size is 2GB.
              </div>
            </FilePage>
          </el-form-item>

          <el-form-item prop="files3" v-if="form.selected === 1" :required="this.form.selected === 1">
            <template slot="label">
              原始可编辑文件(必传) <br><br>&nbsp&nbsp&nbspOriginal Editable File &nbsp&nbsp&nbsp(Mandatory)
            </template>
            <FilePage v-model="form.files3" :mainId="form.id" :formData="form" field="files3" fileKey="files3">
              <span slot="btn">
                <el-button type="primary" size="small" icon="el-icon-download" @click="download">下载模板 <br><br>Download
                  Attachment
                  Format</el-button>
              </span>
              <div slot="tip" class="el-upload__tip">
              </div>
            </FilePage>
          </el-form-item>

          <el-form-item prop="files4" v-if="form.selected === 1">
            <template slot="label">
              介绍视频(可传) <br><br>&nbspIntroduction Video &nbsp(Optional)
            </template>
            <FilePage v-model="form.files4" :mainId="form.id" :formData="form" field="files4" fileKey="files4"
              :accept="'.mp4,.avi,.mov,.wmv,.flv,.rmvb'" :acceptType="'video/*'">
              <div slot="tip" class="el-upload__tip">
                仅限.mp4,.avi,.mov,.wmv,.flv,.rmvb视频格式，单个文件大小不超过500mb，可上传多个文件。
                <br>
                Only file in .mp4,.avi,.mov,.wmv,.flv or .rmvb format is accepted, maximum file size is 500MB.
              </div>
            </FilePage>
          </el-form-item>

          <el-form-item prop="files5" v-if="form.selected === 1">
            <template slot="label">
              其它文件(可传)<br><br>
              Other Files (Optional)
            </template>
            <FilePage v-model="form.files5" :mainId="form.id" :formData="form" field="files5" fileKey="files5">
              <div slot="tip" class="el-upload__tip">
              </div>
            </FilePage>
          </el-form-item>

        </el-form>
        <div class="submit-btn">
          <el-button type="primary" @click="submitForm()">确认并提交 Confirm and Submit</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
.el-container,
.el-header,
.el-main {
  padding: 0;
  margin: 0;
  width: 100%;
  background-color: #E3F2FD;
}

.el-container {
  max-width: 1200px;
  margin: 0 auto;
}

.el-main {
  padding: 10px 10px;
}

.el-header {
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  background: linear-gradient(#90CAF9, #E3F2FD);
}

/deep/ .el-form-item__label {
  text-align: left !important;
  font-weight: bold;
  color: #0053B7 !important;
}

.header-up {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-weight: bold;
  font-size: 28px;
  color: #0053B7;
}

.header-down {
  width: 100%;
  text-align: left;
  font-size: 17px;
  margin-top: 10px;
  color: #0053B7;
}

img {
  height: 32px;
}

/deep/ .el-radio__inner {
  border: 1px solid #C0C4CC;
}

.el-checkbox,
.el-radio {
  display: flex;
}

.way-title,
.radio-text-up {
  padding-top: 0 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #0053B7 !important;
  line-height: 20px;
}

/deep/ .el-checkbox__label {
  line-height: 15px;
}

.radio-text-down {
  font-size: 14px !important;
  color: #74B1ED !important;
  letter-spacing: -1px;
}

.radio-tr {
  padding-top: 15px;
  width: 100%;
  display: flex;
}

.radio-td {
  width: 33%;
}

/deep/ textarea,
/deep/ input,
/deep/ .el-radio__inner,
/deep/ .el-checkbox__inner {
  background-color: #FFFFFF;
}

.main-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-form-item {
  padding-left: 15px;
  padding-right: 15px;
}

.radio-group-item {
  margin-top: 10px;
}

.submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

/deep/ .el-collapse-item__wrap {
  border-bottom: none !important;
}

/deep/ .el-collapse {
  border-bottom: none !important;
}

/deep/ .el-collapse-item__header {
  background-color: #f4f5f8;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #333;
}

/deep/ .el-collapse-item__content {
  padding: 10px;
  padding-bottom: 0px;
}

/deep/ .el-form-item__label {
  line-height: normal;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.el-radio {
  margin-bottom: 15px;
}

.el-upload__tip {
  font-weight: bold;
  color: #0053B7;
  font-size: 14px;
}
</style>
